<template>
	<view class="control">
		<view class="header">
			<nav-bar title="教练中心" :color="navBarColor" :bg="navBarBg" />
			<view class="flex-align">
				<view class="image">
					<van-image width="150rpx" height="150rpx" fit="cover" round :src="coach_list.coach_avatar" />
				</view>
				<view class="info">
					<view class="name">{{coach_list.full_name}}</view>
					<view class="tag-box">
						<view class="tag">{{coach_list.level_type}}</view>
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7dd296f934dfcd77baba20e98e6debb34065d443.png" />
					</view>
				</view>
			</view>
		</view>

		<view class="con">
			<view class="info-item">
				<view class="title flex-align">
					<text>基本资料</text>
				</view>
				<view class="basic-list">
					<view class="basic-item flex-align">
						出生日期：{{coach_list.birthday}}
					</view>
					<view class="basic-item flex-align">
						手机号：{{coach_list.phone_num}}
					</view>
					<view class="basic-item flex-align">
						住址：{{coach_list.address}}
					</view>
					<view class="basic-item flex-align">
						工作岗位：{{coach_list.teach_project}}
					</view>
					<!-- <view class="basic-item flex-align">
						工号：{{coach_list.sort}}
					</view> -->
					<view class="basic-item flex-align">
						工龄：{{coach_list.teach_age}}年
					</view>
					<view class="basic-item flex-align" v-if="coach_list.sex == 0">
						性别：男
					</view>
					<view class="basic-item flex-align" v-if="coach_list.sex == 2">
						性别：女
					</view>
					<view class="basic-item flex-align">
						年龄：coach_list.teach_age
					</view>
					<view class="basic-item flex-align">
						员工卡：{{coach_list.staff_card}}
					</view>
					<view class="basic-item flex-align">
						内码：{{coach_list.inner_code}}
					</view>
					<view class="basic-item flex-align">
						入职时间：{{coach_list.entry_time}}
					</view>
				</view>
			</view>
			<view class="info-item">
				<view class="title flex-align">
					<text>教练相册</text>
				</view>
				<view class="img-list flex-space-between">
					<view class="img-item" v-for="(item,index) in imgList.slice(0,4)" :key="item"
						@click="previewImage(index)">
						<van-image :src="item" width="100%" height="100%" />
					</view>
					<view class="more flex-center" v-if="imgList.length > 4" @click="previewImage(3)">
						+{{imgList.length - 4}}
					</view>
				</view>
			</view>
			<view class="info-item">
				<view class="title flex-align">
					<text>个人荣耀</text>
				</view>
				<view class="basic-list strong">
					<!-- <view class="basic-item flex-align"> -->
					{{coach_list.coach_honor}}
					<!-- </view> -->

				</view>
			</view>
			<view class="info-item">
				<view class="title flex-align">
					<text>教学经历</text>
				</view>
				<view class="basic-list strong">
					<u-parse :content="coach_list.content"></u-parse>
					<!-- <view class="basic-item flex-align" style="width: 80%;">
						<u-parse :content="list.content"></u-parse>
					</view> -->
					<!-- <view class="basic-item flex-align">
						2016.01-2019.06：国家体育馆游戏教练
					</view> -->
				</view>
			</view>
			<!-- <view class="info-item">
				<view class="title flex-align">
					<text>教练资质</text>
				</view>
				<view class="basic-list strong">
					<view class="basic-item flex-align">
						教练资质：13616544654684
					</view>
				</view>
			</view>
			<view class="info-item">
				<view class="title flex-align">
					<text>教学经历</text>
				</view>
				<view class="basic-list strong">
					<view class="basic-item flex-align">
						2016.01-2019.06：国家体育馆游戏教练
					</view>
					<view class="basic-item flex-align">
						2016.01-2019.06：国家体育馆游戏教练
					</view>
				</view>
			</view>
			<view class="info-item">
				<view class="title flex-align">
					<text>个人荣耀</text>
				</view>
				<view class="basic-list strong">
					<view class="basic-item flex-align">
						2015-2017年上海拥有竞标冠军
					</view>
					<view class="basic-item flex-align">
						2015-2017年上海拥有竞标冠军
					</view>
					<view class="basic-item flex-align">
						2015-2017年上海拥有竞标冠军
					</view>
				</view>
			</view> -->

		</view>
	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	import navbar from '@/mixins/navbar.js';
	export default {
		mixins: [navbar({
			navBarColor: '#fff'
		})],
		data() {
			return {
				// imgList: [
				// 	"https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70c18dc329c0011116df0/16532784772763161787.png",
				// 	"https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70c18dc329c0011116df0/16532784772778355947.png",
				// 	"https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70c18dc329c0011116df0/16532784772774763299.png",
				// 	"https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70c18dc329c0011116df0/16532784772778284636.png",
				// 	"https://img.yzcdn.cn/vant/cat.jpeg"
				// ],
				imgList: [],
				coach_id: "",
				coach_list: {},
			}
		},
		onLoad(options) {
			this.coach_id = options.coach_id
			if (uni.getStorageSync("entry_name") == '') {
				uni.showToast({
					title: '请登录！',
					icon: 'exception',
					duration: 850
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/my-center/my-center'
					})
				}, 1000);
			}
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			this.itemChooselist = this.venuelist[0]
			this.coach_info()
		},
		methods: {
			// 渲染第一个教练
			async coach_info() {
				let params = {
					app_id: this.$https.weixinAppId,
					project_id: uni.getStorageSync('project_id'),
					venue_id: this.itemChooselist.id,
					coach_id: this.coach_id
				};
				let res = await personal.info(params);
				if (res.code == 1) {
					this.coach_list = res.data
					this.imgList = res.data.coach_photos[0].split('|')
				}
			},
			previewImage(index) {
				//uniapp预览轮播图
				uni.previewImage({
					current: index,
					urls: this.imgList
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.header {
			background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/efe678b2c397fe005cff1a9228b2cb9cb847ea43.png");
			background-size: 100%;
			padding: 32rpx 30rpx 30rpx;
			background-repeat: no-repeat;

			.image /deep/ .van-image {
				border: 6rpx solid white;
			}

			.info {
				margin-left: 17rpx;

				.name {
					color: rgb(255, 255, 255);
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 700;
				}

				.tag-box {
					position: relative;
					margin-top: 25rpx;

					.tag {
						padding: 8rpx 30rpx;
						padding-left: 60rpx;
						background-color: rgb(108, 105, 196);
						border-radius: 18.5rpx;
						color: rgb(255, 255, 255);
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
					}

					image {
						position: absolute;
						width: 45rpx;
						height: 52rpx;
						left: 0;
						top: 0;
						bottom: 0;
						margin: auto;
					}
				}
			}
		}

		.con {
			padding: 32rpx 30rpx 30rpx;
			// flex: 1;
			overflow: auto;

			.info-item {
				padding-top: 30rpx;
				margin-top: 10rpx;
				background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c809443631a7a14ecc1530b9dcad6725d03d875b.png");
				background-repeat: no-repeat;
				background-size: 50rpx auto;
				background-position: 60rpx 10rpx;

				.title {
					margin-bottom: 20rpx;
					color: rgb(51, 51, 51);
					font-size: 30rpx;
					font-weight: 700;
					transform: translateX(70rpx);
				}

				.img-list {
					position: relative;

					.img-item {
						width: 23%;
						position: relative;

						/deep/ .van-image {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
						}

						&:before {
							display: block;
							content: '';
							width: 100%;
							padding-top: 100%;
						}
					}

					.more {
						width: 23%;
						right: 0;
						height: 100%;
						font-size: 45rpx;
						color: rgb(255, 255, 255);
						background-color: rgba(0, 0, 0, .3);
						position: absolute;
					}

				}

				.basic-list {
					.basic-item {
						color: rgb(102, 102, 102);
						font-size: 26rpx;
						font-weight: 500;
						white-space: nowrap;
						margin-bottom: 20rpx;

						&::before {
							content: '';
							display: block;
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							margin-right: 31rpx;
							background-color: #5c93fb;
						}
					}
				}

				.strong .basic-item {
					font-weight: 700 !important;
					color: rgb(136, 136, 136);
				}
			}

		}
	}
</style>